<template>
	<div>
		<d2-container v-if="!orderShow">
			<div slot="header" style="display:flex; justify-content: space-between;">
				<div>套餐管理</div>
				<div>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<!--<el-form-item label="分类">
							 <el-select v-model="category" placeholder="请选择">
							    <el-option
							      v-for="item in className"
							      :key="item.value"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							  </el-select>
						</el-form-item>-->
						<el-form-item label="关键词"><el-input placeholder="商品名" v-model="search"></el-input></el-form-item>
						<el-form-item><el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button></el-form-item>
						<!--<el-form-item><el-button type="primary" size="small " icon="el-icon-plus" @click="onGuiGe">辅助单位</el-button></el-form-item>-->
						<el-form-item><el-button type="primary" size="small " icon="el-icon-plus" @click="onAddProduct">添加套餐</el-button></el-form-item>
					</el-form>
					
				</div>
			</div>
			<div>
				<template>
					<el-table stripe highlight-current-row style="width: 100%" :data="productData">
						<el-table-column type="index" width="50" label="序号"></el-table-column>
						<el-table-column prop="id" label="id"></el-table-column>
						<el-table-column label="主图">
							<template slot-scope="scope">
								<img :src="baseUrl + scope.row.thumb" width="50" height="50" v-if="scope.row.thumb != null" />
							</template>
						</el-table-column>
						<el-table-column prop="name" label="名称"></el-table-column>
						<el-table-column prop="des" label="商品描述"></el-table-column>
						<el-table-column prop="sort" label="排序" sortable></el-table-column>
						<el-table-column prop="price" label="价格"></el-table-column>
						<el-table-column label="状态">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.state == 1">上架中</el-tag>
								<el-tag type="danger" v-if="scope.row.state == 2">下架中</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onState(scope.row.id, 2)" v-if="scope.row.state == 1">下架</el-button>
								<el-button type="text" size="small" v-if="scope.row.state == 2" @click="onState(scope.row.id, 1)">上架</el-button>
								<el-button type="text" size="small" @click="onComUpdata(scope.row.id)">修改</el-button>
								<el-button type="text" size="small" @click="onProDel(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<!-- 分页 -->
			<template slot="footer">
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page="page.current"
					layout="total, prev, pager, next, jumper"
					:total="page.total"
					:page-size="page.size"
				></el-pagination>
			</template>
			<!-- 产品规格 -->
			<el-dialog title="辅助规格" :visible.sync="dialogSxname" width="500px">
				<el-dialog width="400px" title="修改单位" :visible.sync="dialogSxnameInner" append-to-body>
					<el-form label-width="100px">
						<el-form-item label="修改单位"><el-input v-model="SxnameUpdate"></el-input></el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" @click="onSxUpdateSubmit">确定</el-button>
							<el-button @click="dialogSxnameInner = false" size="small">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>
				<el-form label-width="80px">
					<el-form-item label="单位"><el-input v-model="sx_name" style="width: 300px;"></el-input></el-form-item>
				</el-form>
				<template>
					<el-table :data="sxName" style="width: 100%" max-height="300">
						<el-table-column type="index" width="50"></el-table-column>
						<el-table-column prop="name" label="单位"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="onGuiUpdate(scope.row.id)">修改</el-button>
								<el-button type="text" size="small" @click="onGuiDel(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<div slot="footer">
					<el-button type="primary" @click="onGuiGeAdd" size="small">添加</el-button>
					<el-button size="small" @click="dialogSxname = false">关闭</el-button>
				</div>
			</el-dialog>
		</d2-container>
		<goods-add v-model="orderShow" :id="id"></goods-add>
	</div>
</template>

<script>
import goodsAdd from './goodsAdd';
import { getGuige,getCategoryList, postGuigeAdd, getGuigeEdit, postGuigeUpdate, getGuigeDel, getProduct, getProductState, getProductDel,getPackagelist,postPackageEdit } from '@/api/api';
export default {
	components: {
		goodsAdd
	},
	data() {
		return {
			productData: [],
			orderShow: false,
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			//单位
			sx_name: '',
			dialogSxname: false,
			sxName: [], //单位 规格表
			SxnameUpdate: '', //修改input框
			dialogSxnameInner: false, //修改弹窗
			Sxid: -1,
			//子组件 添加 修改
			id: -1,
			baseUrl: process.env.VUE_APP_URL,
			search:'',
			category:'',
			className:[]
		};
	},
	watch: {
		dialogSxname(val) {
			if (!val) {
				this.sx_name = '';
			}
		}
	},
	mounted() {
		this.getProductData();
		this.getCategory()
	},
	methods: {
		//商品列表
		getProductData() {
			let data = {
				page: this.page.current,
				search:this.search,
				category:this.category
			};
//			getProduct(data).then(res => {
//				if (res.state == 0) {
//					this.productData = res.data.data;
//					this.page.size = res.data.per_page;
//					this.page.total = res.data.total;
//				}
//			});
			getPackagelist(data).then(res =>{
				console.log(res)
				if (res.state == 0) {
					this.productData = res.data.data;
					this.page.size = res.data.per_page;
					this.page.total = res.data.total;
				}
			})
		},
		//分类加载
		getCategory(){
			getCategoryList().then(res=>{
				if(res.state==0){
					this.className=res.data.data
				}
			})
		},
		onSearch(){		//搜搜
			this.page.current=1;
			this.getProductData()
		},
		onAddProduct() {
			this.id = -1;
			this.orderShow = true;
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getProductData();
		},
		//辅助单位 规格
		onGuiGe() {
			getGuige().then(res => {
				if (res.state == 0) {
					this.sxName = res.data.data;
					this.dialogSxname = true;
				}
			});
		},
		//规格添加
		onGuiGeAdd() {
			let data = {
				name: this.sx_name
			};
			postGuigeAdd(data).then(res => {
				if (res.state == 0) {
					this.$message.success('添加成功');
					this.onGuiGe();
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		onGuiUpdate(id) {
			getGuigeEdit(id).then(res => {
				if (res.state == 0) {
					this.SxnameUpdate = res.data.name;
					this.Sxid = res.data.id;
					this.dialogSxnameInner = true;
				}
			});
		},
		//规格修改名
		onSxUpdateSubmit() {
			postGuigeUpdate({ name: this.SxnameUpdate, id: this.Sxid }).then(res => {
				if (res.state == 0) {
					this.$message.success('修改成功');
					this.dialogSxnameInner = false;
					this.onGuiGe();
				} else {
					this.$message.error(res.msg);
				}
			});
		},
		onGuiDel(id) {
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getGuigeDel(id).then(res => {
					if (res.state == 0) {
						this.$message.success('删除成功');
						this.onGuiGe();
					}
				});
			});
		},
		//商品修改
		onComUpdata(id) {
			this.id = id;
			this.orderShow = true;

		},
		//产品开启关闭
		onState(id, state) {
			this.$confirm('此操作将更改套餐的显示状态, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
//				var form = [];
//				form.id=id;
//				form.state=state;
			var data = {
				id:id,
				state:state,
			};
//				console.log(id,state)
				postPackageEdit(data).then(res => {
					if (res.state == 0) {
						this.$message.success('修改成功');
						this.getProductData();
					}
				});
			});
		},
		//套餐删除
		onProDel(id) {
			this.$confirm('此操作将永久删除该套餐, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getProductDel(id).then(res => {
					if (res.state == 0) {
						this.$message.success('删除成功');
						this.getProductData();
					}
				});
			});
		}
	}
};
</script>

<style></style>
